<template>
    <div class="categorpalylist">
        <Tag @cat-change="catChange"></Tag>
        <div class="py-5 text-xl ">{{ pageData.cat }}歌单</div>
         <!-- 骨架占位 -->
         <div class="skeleton" v-if="loading">
            <el-skeleton v-for="index in 32" :key="index" style="width: 150px" loading animated>
                <template #template>
                    <el-skeleton-item variant="image" style=" width: 150px; height: 150px" />
                    <el-skeleton-item variant="p" style="width: 150px;margin-top: 10px;" />
                </template>
            </el-skeleton>
        </div>
        <div class="personalized_container" v-else>
            <div class="personalized_item" v-for="(item, index) in list" :key=index
                @click="router.push({ name: 'playlist', query: { id: item.id } })">
                <PlayCover :pic-url="item.coverImgUrl" :play-count="item.playCount"></PlayCover>
                <p>{{ item.name }}</p>
            </div>
        </div>
        <Pagination @page-change="getData" :current-page="currentPage" :total="total" :page-size="pageSize" />
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { useRouter } from "vue-router";
import Tag from "./tags.vue"
import { GetcateGorPlayList } from "@/api/api.ts"
import PlayCover from '@/components/common/Playlistcover.vue'
import Pagination from "@/components/common/Pagination.vue";
import type {lists} from '@/models/categorplaylist'
const list = ref<lists>()
const router = useRouter()
const currentPage = ref(1)//当前页
const pageSize = ref(32)//每页的条数
const total = ref(0)
const loading=ref(true)
onMounted(() => {
    getData(1)
})
const pageData = reactive({
    limit: 32,
    offset: 0,
    cat: "全部",
    t: Date.now()
})
const catChange = (cat: string) => {
    loading.value=true
    pageData.cat = cat
    pageData.offset = 0;
    getData(1)
}
const getData = async (newPage:number) => {
    loading.value=true
    currentPage.value=newPage
    await GetcateGorPlayList(pageData.cat, pageData.limit, (newPage-1)*pageData.limit, pageData.t).then(res => {
        list.value = res.data.playlists
        total.value=res.data.total
    })
    loading.value=false
}
</script>
<style lang="less" scoped>
.personalized_container,.skeleton {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;

    .personalized_item {
        width: 150px;
        margin-bottom: 20px;
        cursor: pointer;

        p {
            margin-top: 10px;
            width: 150px;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

}
</style>
